<% if (locals.siteData.feature?.share?.enable) { %>
    <button type="button" id="share-btn" class="text-gray-400 hover:text-blue-700 dark:text-gray-400 dark:hover:text-gray-300">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
             stroke-linejoin="round" class="w-4 h-4">
            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/>
            <polyline points="16 6 12 2 8 6"/>
            <line x1="12" y1="2" x2="12" y2="15"/>
        </svg>
    </button>

    <div id="share-popup" class="hidden fixed inset-0 z-50" onclick="handleClickOutside(event)">
        <div class="absolute inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75"></div>
        <div class="relative z-10 flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
            <div class="relative transform overflow-visible rounded-lg bg-white dark:bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 w-fit">
                <div class="social-share text-center"
                     data-sites="<%= Object.entries(locals.siteData.feature?.share?.options || {})
                             .filter(([_, enabled]) => enabled)
                             .map(([platform]) => platform)
                             .join(',') %>"
                     data-mobile-sites="<%= Object.entries(locals.siteData.feature?.share?.options || {})
                             .filter(([_, enabled]) => enabled)
                             .map(([platform]) => platform)
                             .join(',') %>"
                     data-wechat-qrcode-title="微信扫一扫：分享"
                     data-wechat-qrcode-helper="微信扫一扫后点击右上角分享">
                </div>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="<%= locals.siteData.feature?.share?.cdn || 'https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16' %>/css/share.min.css">
    <script src="<%= locals.siteData.feature?.share?.cdn || 'https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16' %>/js/social-share.min.js"></script>

    <style>
        /* 修复微信二维码显示被遮挡的问题 */
        .social-share .wechat-qrcode {
            z-index: 9999;
            width: fit-content;
        }
    </style>

    <script>
        document.getElementById('share-btn')?.addEventListener('click', function () {
            document.getElementById('share-popup')?.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        });

        function handleClickOutside(event) {
            const sharePopup = document.getElementById('share-popup');
            const shareContent = sharePopup?.querySelector('.transform');

            // 如果点击的是弹窗内容之外的区域
            if (event.target === sharePopup || !shareContent?.contains(event.target)) {
                hideSharePopup();
            }
        }

        function hideSharePopup() {
            document.getElementById('share-popup')?.classList.add('hidden');
            document.body.style.overflow = '';
        }

        // 处理 ESC 键关闭
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') {
                hideSharePopup();
            }
        });

        document.addEventListener('DOMContentLoaded', function () {
            // 初始化 social share
            socialShare('.social-share', {
                wechatQrcodeTitle: '微信扫一扫：分享',
                wechatQrcodeHelper: '微信扫一扫后点击右上角分享',
                url: window.location.href,
                source: document.title,
                wechat: function (elem, data) {
                    // 自定义微信点击行为
                    if (elem.classList.contains('icon-wechat')) {
                        return false;  // 阻止默认跳转
                    }
                }
            });

            // 防止微信图标点击跳转
            document.querySelector('.icon-wechat')?.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }, true);
        });
    </script>
<% } %>